<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap 模板</title>
    <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 引入 Bootstrap -->
    <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <!-- HTML5 Shim 和 Respond.js 用于让 IE8 支持 HTML5元素和媒体查询 -->
    <!-- 注意： 如果通过 file://  引入 Respond.js 文件，则该文件无法起效果 -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <link href="css/index.css" rel="stylesheet">
</head>
<body data-spy="scroll" data-target="#myScrollspy">
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column" style="margin-top: 50px">
            <nav class="navbar navbar-mycolor navbar-fixed-top" role="navigation">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">我的主页</a>
                </div>
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <ul class="nav navbar-nav">
                        <li class="active">
                            <a href="index.html">首页</a>
                        </li>
                        <li>
                            <a href="special.html">专辑</a>
                        </li>
                        <li class="">
                            <a href="#">扩展</a>
                        </li>
                        <li class="">
                            <a href="discuss.html">讨论</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">更多<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li class="">
                                    <a href="#">图库</a>
                                </li>
                                <li class="">
                                    <a href="#">留言板</a>
                                </li>
                                <li class="">
                                    <a href="#">授权转载</a>
                                </li>
                                <li class="">
                                    <a href="#">@我</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input class="form-control" type="text" />
                        </div>
                        <button type="submit" class="btn btn-default">搜索</button>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="hidden-xs">
                            <a href="#modal-container" data-toggle="modal">登录</a>
                        </li>
                        <li class="dropdown">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">用户中心<strong class="caret"></strong></a>
                            <ul class="dropdown-menu">
                                <li>
                                    <a href="#">个人中心</a>
                                </li>
                                <li>
                                    <a href="#">修改密码</a>
                                </li>
                                <li>
                                    <a href="#">退出</a>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </nav>
            <!--核心内容-->
            <div class="row clearfix" style="margin-top: 30px">
                <div class="col-md-9 column">
                    <div class="row clearfix">
                        <div class="" >
                            <div class="panel-body">
                                <h3 align="center">
                                    &nbsp;背影
                                    <small>&nbsp;&nbsp;朱自清</small>
                                </h3>
                                <p class="border_dian">
                                    发布时间：2016/1/1 2/2/2 &nbsp;&nbsp; 编辑：王五
                                </p>
                                <span class="category_style">
                                我与父亲不相见已二年余了，我最不能忘记的是他的背影。<br>
                                那年冬天，祖母死了，父亲的差使1也交卸了，正是祸不单行的日子。我从北京到徐州，打算跟着父亲奔丧2回家。<br>到徐州见着父亲，看见满院狼藉3的东西，又想起祖母，不禁簌簌地流下眼泪。<br>父亲说：“事已如此，不必难过，好在天无绝人之路！”<br>
                                回家变卖典质4，父亲还了亏空；又借钱办了丧事。<br>这些日子，家中光景5很是惨澹，一半为了丧事，一半为了父亲赋闲6。<br>丧事完毕，父亲要到南京谋事，我也要回北京念书，我们便同行。<br>
                                到南京时，有朋友约去游逛，勾留7了一日；第二日上午便须渡江到浦口，下午上车北去。父亲因为事忙，本已说定不送我，叫旅馆里一个熟识的茶房8陪我同去。他再三嘱咐茶房，甚是仔细。但他终于不放心，怕茶房不妥帖9；颇踌躇10了一会。其实我那年已二十岁，北京已来往过两三次，是没有什么要紧的了。他踌躇了一会，终于决定还是自己送我去。我再三劝他不必去；他只说：“不要紧，他们去不好！”
                                我们过了江，进了车站。我买票，他忙着照看行李。行李太多，得向脚夫11行些小费才可过去。他便又忙着和他们讲价钱。我那时真是聪明过分，总觉他说话不大漂亮，非自己插嘴不可，但他终于讲定了价钱；就送我上车。他给我拣定了靠车门的一张椅子；我将他给我做的紫毛大衣铺好座位。他嘱我路上小心，夜里要警醒些，不要受凉。又嘱托茶房好好照应我。我心里暗笑他的迂；他们只认得钱，托他们只是白托！而且我这样大年纪的人，难道还不能料理自己么？我现在想想，我那时真是太聪明了。
                                我说道：“爸爸，你走吧。”他望车外看了看，说：“我买几个橘子去。你就在此地，不要走动。”我看那边月台的栅栏外有几个卖东西的等着顾客。走到那边月台，须穿过铁道，须跳下去又爬上去。父亲是一个胖子，走过去自然要费事些。我本来要去的，他不肯，只好让他去。我看见他戴着黑布小帽，穿着黑布大马褂12，深青布棉袍，蹒跚13地走到铁道边，慢慢探身下去，尚不大难。可是他穿过铁道，要爬上那边月台，就不容易了。他用两手攀着上面，两脚再向上缩；他肥胖的身子向左微倾，显出努力的样子。这时我看见他的背影，我的泪很快地流下来了。我赶紧拭干了泪。怕他看见，也怕别人看见。我再向外看时，他已抱了朱红的橘子往回走了。过铁道时，他先将橘子散放在地上，自己慢慢爬下，再抱起橘子走。到这边时，我赶紧去搀他。他和我走到车上，将橘子一股脑儿放在我的皮大衣上。于是扑扑衣上的泥土，心里很轻松似的。过一会儿说：“我走了，到那边来信！”我望着他走出去。他走了几步，回过头看见我，说：“进去吧，里边没人。”等他的背影混入来来往往的人里，再找不着了，我便进来坐下，我的眼泪又来了。
                                近几年来，父亲和我都是东奔西走，家中光景是一日不如一日。他少年出外谋生，独力支持，做了许多大事。哪知老境却如此颓唐！他触目伤怀，自然情不能自已。情郁于中，自然要发之于外；家庭琐屑便往往触他之怒。他待我渐渐不同往日。但最近两年不见，他终于忘却我的不好，只是惦记着我，惦记着他的儿子。我北来后，他写了一信给我，信中说道：“我身体平安，惟膀子疼痛厉害，举箸14提笔，诸多不便，大约大去之期15不远矣。”我读到此处，在晶莹的泪光中，又看见那肥胖的、青布棉袍黑布马褂的背影。唉！我不知何时再能与他相见！[2]唉！我不知何时再能与他相见！[2]唉！我不知何时再能与他相见！[2]
                                </span><p></p>
                                <div class="big_span_pic">
                                    <p></p><p></p>
                                    <span class="glyphicon glyphicon-thumbs-up span_pic_color"></span>&nbsp;赞
                                    <span class="glyphicon glyphicon-comment span_pic_color want_say"></span>&nbsp;评论
                                    &nbsp;&nbsp;&nbsp;&nbsp;
                                    2017/1/1 2:20:20
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="col-md-3 column">
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>相似文章</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>背影</td>
                        </tr>
                        <tr>
                            <td>背影</td>
                        </tr>
                        <tr>
                            <td>背影</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>站内排行</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>背影</td>
                        </tr>
                        <tr>
                            <td>背影</td>
                        </tr>
                        <tr>
                            <td>背影</td>
                        </tr>
                        </tbody>
                    </table>
                    <table class="table table-hover">
                        <thead>
                        <tr>
                            <th>访问历史</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>背影</td>
                        </tr>
                        <tr>
                            <td>背影</td>
                        </tr>
                        <tr>
                            <td>背影</td>
                        </tr>
                        </tbody>
                    </table>

                    <div><strong>上一篇：</strong><small>背影</small></div>
                    <hr>
                    <div><strong>下一篇：</strong><small>背影</small></div>
                </div>
            </div>

            <div class="row clearfix">
                <!--评论框-->
                <div class="col-md-9 column" style="margin-top: 50px">
                    <div class="media">
                    <a class="pull-left" href="#">
                        <img class="media-object" src="public/1.2.png" alt="媒体对象">
                    </a>
                    <div class="media-body">
                        <h4 class="media-heading">路人甲</h4>
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        这是一些示例文本。这是一些示例文本。
                        <hr>
                        <p>
                            <span class="glyphicon glyphicon-thumbs-up span_pic_color"></span>&nbsp;赞
                            <span class="glyphicon glyphicon-comment span_pic_color want_say" mediaHeading=":回复 路人甲"></span>&nbsp;回复
                            &nbsp;&nbsp;&nbsp;&nbsp;
                            2017/1/1 2:20:20
                        </p>
                    </div>
                </div>
                    <div class="media">
                        <a class="pull-left" href="#">
                            <img class="media-object" src="public/1.2.png"
                                 alt="媒体对象">
                        </a>
                        <div class="media-body">
                            <h4 class="media-heading">路人2</h4>
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            这是一些示例文本。这是一些示例文本。
                            <hr>
                            <p>
                                <span class="glyphicon glyphicon-thumbs-up span_pic_color"></span>&nbsp;赞
                                <span class="glyphicon glyphicon-comment span_pic_color want_say" mediaHeading=":回复 路人2"></span>&nbsp;回复
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                2017/1/1 2:20:20
                            </p>
                            <div class="media">
                                <a class="pull-left" href="#">
                                    <img class="media-object" src="public/1.2.png">
                                </a>
                                <div class="media-body">
                                    <h4 class="media-heading">路人3</h4>
                                    <span class="blue">:回复 路人2</span>
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    这是一些示例文本。这是一些示例文本。
                                    <hr>
                                    <p>
                                        <span class="glyphicon glyphicon-thumbs-up span_pic_color"></span>&nbsp;赞
                                        <span class="glyphicon glyphicon-comment span_pic_color want_say" mediaHeading=":回复 路人3"></span>&nbsp;回复
                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                        2017/1/1 2:20:20
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <!--核心内容结束-->
            <div class="modal fade" id="modal-container" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalLabel">
                                登录/注册
                            </h4>
                        </div>
                        <div class="modal-body clearfix">
                            <div class="row col-xs-12 col-lg-4">
                                <img src="public/1.jpg" class="img-rounded img-responsive" alt="Cinque Terre" width="200">
                            </div>
                            <div class="row col-xs-12 col-lg-8" style="margin-top:20px">
                                <form class="form-horizontal switch show" id="user_login" role="form">
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">账号</label>
                                        <div class="col-xs-9 col-lg-9">
                                            <input name="username" type="text" class="form-control username" placeholder="请输入账号" data-toggle="tooltip" title="请输入账号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">密码</label>
                                        <div class="col-xs-9 col-lg-9">
                                            <input type="password" name="password" class="form-control password"  placeholder="请输入密码"  data-toggle="tooltip" title="请输入密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">验证码</label>
                                        <div class="col-xs-3 col-lg-3">
                                            <input type="text" name="yanzhengma" class="form-control">
                                        </div>
                                        <div class="col-xs-6 col-lg-6">
                                            <img src="public/1.1.png" class="img-rounded img-responsive" alt="Cinque Terre">
                                        </div>
                                    </div>
                                </form>
                                <form class="form-horizontal hidden switch" id="user_creat" role="form">
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">账号</label>
                                        <div class="col-xs-9 col-lg-9">
                                            <input name="username" type="text" class="form-control username" placeholder="请输入账号" data-toggle="tooltip" title="请输入账号">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">密码</label>
                                        <div class="col-xs-9 col-lg-9">
                                            <input type="password" name="password" class="form-control password password1" placeholder="请输入密码"  data-toggle="tooltip" title="请输入密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">确认密码</label>
                                        <div class="col-xs-9 col-lg-9">
                                            <input type="password" name="password2" class="form-control password2" placeholder="请输入密码"  data-toggle="tooltip" title="请输入密码">
                                        </div>
                                    </div>
                                    <div class="form-group">
                                        <label class="col-xs-3 col-lg-3 control-label">验证码</label>
                                        <div class="col-xs-3 col-lg-3">
                                            <input type="text" name="yanzhengma" class="form-control">
                                        </div>
                                        <div class="col-xs-6 col-lg-6">
                                            <img src="public/1.1.png" class="img-rounded img-responsive" alt="Cinque Terre">
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-primary pull-left" id="switch">注册账号</button>
                            <button type="button" class="btn btn-success" id="login_blog">确定</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title" id="myModalHead" aria-labelledby="myModalLabel">评论</h4>
                        </div>
                        <div class="modal-body" style="overflow:hidden">
                            <form role="form">
                                <div class="form-group">
                                    <textarea class="form-control" id="sayText" style="max-width:570px" rows="3"></textarea>
                                </div>
                            </form>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                            <button type="button" class="btn btn-primary">确认发布</button>
                        </div>
                    </div><!-- /.modal-content -->
                </div><!-- /.modal-dialog -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</div>

<footer>
    <div id="footer" class="panel panel-success" colorClass="panel-success" style="margin-top: 50px">
        <div class="panel-heading">
            <div class="row">
                <div class="col-md-6">
                    <p>2017-05-01
                        <a href="#">冠冠</a> 制作
                        <a href="#" target="_blank" title=""></a>
                </div>
                <div class="col-md-6 social-text-align">
                    <p class="fh5co-social-icons">
                        <a href="#"><i class="icon-twitter-with-circle"></i></a>
                        <a href="#"><i class="icon-facebook-with-circle"></i></a>
                        <a href="#"><i class="icon-instagram-with-circle"></i></a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</footer>

<!--返回顶部标签-->
<div class="right_return_on">
    <span class="glyphicon glyphicon-chevron-up"></span>
</div>
<!--最小屏幕下颜色切换方式-->
<div class="right_box_on visible-xs">
    <span class="glyphicon glyphicon-chevron-left"></span>
</div>
<div class="small_right_box">
    <ul class="nav nav-tabs nav-stacked small_font" style="width:25px">
        <li>
            <span class="label label-default hand" onclick="otherColor('default')">浅灰</span>
            <span class="label label-primary hand" onclick="otherColor('primary')">深蓝</span>
            <span class="label label-success hand" onclick="otherColor('success')">浅绿</span>
            <span class="label label-info hand" onclick="otherColor('info')">浅蓝</span>
            <span class="label label-warning hand" onclick="otherColor('warning')">黄色</span>
            <span class="label label-danger hand" onclick="otherColor('danger')">红色</span>
        </li>
    </ul>
</div>


<!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
<script src="bootstrap/js/jquery.js"></script>
<!-- 包括所有已编译的插件 -->
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- 鼠标效果 -->
<script  type="text/javascript" src="mymouse/js/mymouse.js" pic="./mymouse/images/" id="mymouse"></script>
<script src="js/index.js"></script>
<script>
    var theHeight= 0;
    var increase= 0;
    var timeWorlk;
    $(function(){
        $(window).scroll( function() {
            var theHeight = $(document).scrollTop();
            if(theHeight > 100) {
                $('.navbar').fadeOut("slow");
                $('.right_return_on').fadeIn("slow");
            } else {
                $('.navbar').fadeIn("slow");
                $('.right_return_on').fadeOut("slow");
            }
        } );
        $('.right_return_on').click(function(){
            timeWorlk = window.setInterval("reduceHeight()",1);//1000为1秒钟
        });
        //评论弹窗
        $('.want_say').click(function(){
            $('#myModal').modal('show');
            var text = $(this).attr('mediaHeading');
            if (text) {
                $('#myModalHead').html($(this).attr('mediaHeading'));
            } else {
                $('#myModalHead').html('评论');
            }
            $('#sayText').val('');
        });
    });
    function reduceHeight(){
        theHeight = $(document).scrollTop();
        var poor = increase++;
        if(theHeight > poor) {
            $(document).scrollTop(theHeight - poor);
        } else if (theHeight <= poor){
            $(document).scrollTop(0);
            window.clearInterval(timeWorlk);
            increase = 0;
            window.clearInterval(timeWorlk);
        }

    }
</script>
</body>
</html>
